<template>
	<view class="">
		<view class="">
			<view class="search">
			  <image class="search-icon" src="/static/index/search-icon.png"></image>
			  <input class="search-input" placeholder="搜索">
			</view>
		</view>
		<view class="content">
			<!-- 左侧一级分类 -->
			<scroll-view scroll-y class="left-aside">
        <view style="background-color:#5f5e79; height:100upx; text-align: center;" @click="openDialog">
          <text style="font-size:26upx; line-height:100upx;">添加</text>
        </view>
				<view v-for="item in flistFirstItems" :key="item.id" class="f-item b-b" :class="{active: item.id === fCurrentId}" @click="ftabtap(item)">
					{{item.fieldName}}
				</view>
			</scroll-view>
			<!-- 右侧二级分类 -->
      <scroll-view scroll-y>
				<scroll-view scroll-x v-if="fCurrentId != 1" style="display:flex; white-space: nowrap; margin-top:10upx; width:564upx;">
					<view v-for="item in slist" :key="item.id" class="s-item b-b" :class="{activeItem: item.id === sCurrentId}" @click="stabtap(item)">
						{{item.fieldName}}
					</view>
				</scroll-view>
				<view class="section">
					<!-- <navigator
						v-for="goods in item.goods"
						:key="goods.id"
						class="goods"
						hover-class="none"
						:url="`/pages/goods/goods?id=${goods.id}`"
					>
						<image class="image" :src="goods.picture"></image>
						<view class="name ellipsis">{{ goods.name }}</view>
						<view class="price">
							<text class="symbol">¥</text>
							<text class="number">{{ goods.price }}</text>
						</view>
					</navigator> -->
					<view v-if="sCurrentId != 1">
						<view v-for="item in goodsList" :key="item.id" style="display: flex;" @click="navToDetailPage(item)">
							<view class="image-wrapper">
								<image
									:src="item.iconUrl"
									mode="scaleToFill"
									class=""
								/>
							</view>

							<view style="display: flex; flex-direction: column;">
								<text class="title">{{ item.name }}</text>
								<view class="price-box">
									<text class="price">{{item.priceList[0] !== undefined && item.priceList[0].price !== undefined ? item.priceList[0].price.toFixed(2) : '面议'}}</text>
									<image class="bag-icon" src="/static/index/bag.png"></image>
								</view>
							</view>

						</view>
					</view>
				</view>
			</scroll-view>

			<!-- <scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
				<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
					<text class="s-item">{{item.name}}</text>
					<view class="t-list">
						<view v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist" :key="titem.id" @click="navToDetailPage(titem)">
							<view class="t-item-content">
								<image :src="titem.picture" class="t-image"></image>
								<view class="t-name">
									<text>{{titem.name}}</text>
									<view class="t-name">
										<text>{{price}}</text>
										<image class="bag-icon" src="/static/index/bag.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view> -->

			<!-- 弹出层 -->
			<uni-popup ref="popup" :mask-click="false" type="dialog" mask-background-color="rgba(0,0,0)">
				<view class="dialog">
					<view style="margin-bottom:20px; color:#fff; ">添加分类</view>
					<uni-forms :modelValue="formData">
						<uni-forms-item label="一级分类" name="fName">
							<uni-easyinput type="text" :clearable="false" :styles="{color:'#fff'}" v-model="formData.fName" placeholder="请输入一级分类" />
						</uni-forms-item>
						<!-- <uni-forms-item label="是否存在子项" name="exitSon">
							<radio-group @change="radioChange">
								<view>
									<label style="color:#fff; margin-right:30upx;"><radio value="r1" checked="true" color="lightblue"/>是</label>
									<label style="color:#fff"><radio value="r2" color="lightblue"/>否</label>
								</view>
							</radio-group>
						</uni-forms-item> -->
						<uni-forms-item label="二级分类" name="sName">
							<uni-easyinput type="text" :clearable="false" :styles="{color:'#fff'}" v-model="formData.sName" placeholder="请输入二级分类" />
						</uni-forms-item>
					</uni-forms>
					<view style="display: flex; justify-content:center;">
						<button type="default" style="background:linear-gradient(to right, #2493f1, #14d1cc); width:45%;" @click="submitForm">提交</button>
						<button type="default" style="width:45%;" @click="cancel">取消</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {getCategory} from "@/api/category";
  import {getPublicProduct} from "@/api/public";
	import {getEvaluate} from "@/api/evaluate";


  export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				fCurrentId: 1,
				sCurrentId:	1,
				flist: [],
				slist: [],
				tlist: [],
				goodsList:[],
				flistFirstItems:[],
				flistRemainItems:[],
				formData:{
					fName: '',
					sName: ''
				}
			}
		},
		onLoad(){
      this.getCategroyData();
			this.loadData();
		},
		methods: {
			async loadData(){
				// let list = await this.$api.json('cateList');
				// list.forEach(item=>{
				// 	if(!item.pid){
				// 		this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类
				// 	}else if(!item.picture){
				// 		this.slist.push(item); //没有图的是2级分类
				// 	}else{
				// 		this.tlist.push(item); //3级分类
				// 	}
				// })
        this.getCategroyData();

        try {
          let res;
          let pageNum = 0;
          // 发起请求获取商品数据
          res = await getPublicProduct({ pageSize: 10, pageNum });
					console.log('商品数据res.rows', res.rows);

          // 将获取到的商品数据拼接到商品列表
          this.goodsList = this.goodsList.concat(res.rows);
				} catch (error) {
          console.error('加载商品数据出错：', error);
          this.loadingType = 'more'; // 出错时重置加载状态为可加载更多
        }
				this.flistFirstItems = this.flist;
			},
			//一级分类点击
			ftabtap(item){
				if(!this.sizeCalcState){
					this.calcSize();
				}

				this.fCurrentId = item.id;
				this.sCurrentId = 1;
				// let index = this.slist.findIndex(sitem=>sitem.pid === item.id);
				// this.tabScrollTop = this.slist[index].top;

				getCategory({parentId: item.id}).then(res=>{
					this.slist = res.data;
					if(this.slist!=''){
						this.tlist = res.data[0].children;
					}
					console.log('parentId',item.id);
					console.log("res",res);
				})
			},
			//二级分类点击
			stabtap(item) {
				this.sCurrentId = item.id;
				getCategory({parentId: item.id}).then(res=>{
					// if(this.slist!=''){
					// 	this.tlist = res.data[0].children;
					// }
					console.log('parentId',item.id);
					console.log("res",res);
				})
			},
			// 弹出层提交分类
			submitForm() {
				// 调用接口
			},
			// 弹出层取消提交
			cancel() {
				this.$refs.popup.close();
				this.formData.fName = '';
				this.formData.sName = '';
			},


			//右侧栏滚动
			// asideScroll(e){
			// 	if(!this.sizeCalcState){
			// 		this.calcSize();
			// 	}
			// 	let scrollTop = e.detail.scrollTop;
			// 	let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
			// 	if(tabs.length > 0){
			// 		this.currentId = tabs[0].pid;
			// 	}
			// },
			//计算右侧栏每个tab的高度等信息
			calcSize(){
				let h = 0;
				this.slist.forEach(item=>{
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			navToDetailPage(item){
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
      getCategroyData(){
        getCategory().then(res=>{
          console.log('res', res)
          this.flist = res.data;
          this.slist = res.data;
					// if(this.slist!=''){
					// 	this.tlist = res.data[0].children[0].children;
					// }
				})
			},
			// 打开对话框
			openDialog() {
				this.$refs.popup.open();
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		/* background-color: #f8f8f8; */
	}
	.bag-icon {
	  width: 50upx;
	  height: 50upx;
	  margin-right: 10px;
		position: absolute;
		left: 320upx;
		bottom:-128upx;
	}
	.search {
		margin: 10px;

	  padding:0 10px;
	  box-sizing: border-box;
	  border: 2px solid #dfdeec; /* 设置边框颜色 */
	  border-radius: 18px;
	  display: flex;
	  align-items: center;
	}

	.search-input {
	  flex: 1;
	  height: 40px;
	  border: none;
	  background: transparent;
	  padding: 0 10px;
	  box-sizing: border-box;
	  color: white;
	  font-size: 14px;
	}

	.search-icon {
	  width: 17px;
	  height: 17px;
	  margin-right: 10px;
	}
	.content {
		display: flex;
	}
	.dialog {
		background-color: #353535b6;
		padding: 20upx;
		border-radius:10px;
	}
	.left-aside {
	position: relative;
		flex-shrink: 0;
		width: 130upx;
		height: 80%;
		margin-right: 30upx;
		/* background-color: #fff; */
	}
	.right-aside-item {
		display:flex;
		flex-wrap: nowrap;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		border-right: 1px solid #f0f0f038;
		&.active{
			color: #fff;
			background: #2493f1;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}
	.s-item {
		&.activeItem {
			color:#fff;
			border:1px solid #fff;
		}
		display:inline-block;
		width:130upx;
		height: 70upx;
		line-height:70upx;
		text-align:center;
		font-size: 30upx;
		color: #9392af;
		position: relative;
		overflow: hidden;
		white-space: nowrap;
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		/* background: #fff; */
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item-content {
			display: flex;
			align-items: center;
		}
	.t-item{
		flex-shrink: 0;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		font-size: 15px;
		color: #fff;
		padding: 20upx;

		image{
			width: 140upx;
			height: 140upx;
		}
	}
	.t-item .bag-icon{
		width: 20px;
		height: 20px;
		float: right;
	}
	.t-name{
		padding: 5px;
		width: 80%;
	}
	.section {
    width: 100%;
    display: flex;
		// flex-direction: column;
    padding: 20rpx 0;
		.image-wrapper{
			width: 200upx;
			height: 200upx;
			border-radius: 3px;
			overflow: hidden;
			margin-bottom: 10px;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title {
			font-size:36upx;
			width:360upx;
			color:#fff;
			margin:6upx 20upx;
		}
		.price-box{
			position:relative;
			display: flex;
			font-size: 32upx;
			color: $font-color-light;
		}
		.price{
			color: #fbdb92;
			line-height: 1;
			position:absolute;
			left:10upx;
			bottom:-120upx;
			&:before{
				content: '￥';
				font-size: 40upx;
			}
		}
  }

</style>
